<template>
	<!-- 新增发车 -->
	<div id="addStart" class="nomal_form">
		<div class="nomal_form_main">
			<el-form :model="form" :rules="rules" ref="form" label-width="2rem" class="demo-ruleForm">
				<div class="top_cell main_cell dis_f_sarwc">
					<el-form-item label="发车门店" prop="shopId">
						<el-select v-model="form.shopId" filterable placeholder="请选择发车门店">
							<el-option v-for="item in shopList" :key="item.id" :label="item.shopName" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="发车员" prop="startId">
						<el-select v-model="form.startId" filterable placeholder="请选择发车员">
							<el-option v-for="item in agentList" :key="item.userId" :label="item.nickName" :value="item.userId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="发车时间" prop="startTime">
						<el-date-picker clearable v-model="form.startTime" type="datetime" default-time="9:00:00" value-format="yyyy-MM-dd HH:mm" placeholder="选择发车时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="预定车型">
						<el-select v-model="form.reserveBrand" filterable placeholder="请选择预定车型">
							<el-option v-for="item in carBrandModelList" :key="item.id" :label="item.carBrand + '-' + item.carModel" :value="item.carBrand + '-' + item.carModel">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="车辆" prop="carId" style="position: relative;">
						<!-- <div class="fwb" style="position: absolute;left: -1rem;color: #F56C6C;">*</div> -->
						<el-select
							v-model="form.carId"
							filterable
							placeholder="请选择车辆"
							@change="selectCar"
							allow-create
							ref="agentSelect"
							@hook:mounted="cancalReadOnly"
							@visible-change="cancalReadOnly"
						>
							<el-option
								v-for="item in carList"
								:key="item.id"
								:label="item.carStatus==2?item.carNumber + '=>' + item.brand+'=>出租中':item.carNumber + '=>' + item.brand"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<div class="static-content-item" style="margin-bottom: 22px;">
						<el-button type="primary" @click="handleAddCar">新增车辆</el-button>
					</div>
					<el-form-item label="车主分成比例" prop="ownerProportion" class="has_company">
						<el-input v-model="form.ownerProportion" style="width: 120px">
							<template slot="append">%</template>
						</el-input>
					</el-form-item>
				</div>
				<div class="main_cell dis_f_sarwc">
					<el-form-item label="客户" prop="customerId">
						<el-select
							v-model="form.customerId"
							filterable
							placeholder="请选择客户"
							allow-create
							ref="agentSelect1"
							@hook:mounted="cancalReadOnly"
							@visible-change="cancalReadOnly">
							<el-option
								v-for="item in customerList"
								:key="item.id"
								:label="item.customerName + '，' + item.phone +'，'+item.isDanger"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<div class="static-content-item">
						<el-button type="primary" @click="handleAddCustomer"> 新增客户 </el-button>
					</div>
					<el-form-item label="客户来源">
						<el-radio-group v-model="form.customerResourceType">
							<el-radio v-for="dict in dict.type.customer_resource" :key="dict.value" :label="dict.value">
								{{ dict.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="form.customerResourceType == '1'" label="线上平台">
						<el-select v-model="form.onlineResourceName" allow-create filterable default-first-option placeholder="请选择线上平台" @change="selectPlatform">
							<el-option v-for="item in onlinePlatformList" :key="item.id" :label="item.platformName" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.customerResourceType == '1'" label="线上分成比例" prop="onlineProportion" class="has_company">
						<el-input v-model="form.onlineProportion" @input="handleRentPriceOnline">
							<template slot="append">%</template>
						</el-input>
					</el-form-item>
					<el-form-item v-if="form.customerResourceType == '2'" label="业务员">
						<el-select v-model="form.agentId" filterable placeholder="请选择业务员">
							<el-option v-for="item in agentList" :key="item.userId" :label="item.nickName + ' ' + item.phonenumber" :value="item.userId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.customerResourceType == '2'" label="业务员分成比例" class="has_company">
						<el-input v-model="form.agentProportion" style="width: 120px">
							<template slot="append">%</template>
						</el-input>
					</el-form-item>
				</div>
				<div class="main_cell dis_f_sarwc">
					<el-form-item label="发车油表照片" prop="startGaugeImg">
						<image-upload v-model="form.startGaugeImg" :is-show-tip="false" />
					</el-form-item>
					<el-form-item label="发车图片" prop="startImg">
						<image-upload v-model="form.startImg" :is-show-tip="false" />
					</el-form-item>
					<el-form-item label="人车合影照片" prop="peopleCarImg">
						<image-upload v-model="form.peopleCarImg" :is-show-tip="false" />
					</el-form-item>
					<el-form-item label="发车视频" prop="startVideo">
						<file-upload v-model="form.startVideo" :fileSize="500" :fileType="['mp4','mkv','avi','MOV','rmvb','wmv','hevc','pal','livp','heic','MPEG-4']"  :is-show-tip="false"/>
					</el-form-item>
					<el-form-item label="合同照片" prop="contractFile">
						<!-- <file-upload v-model="form.contractFile" :is-show-tip="false" /> -->
						<image-upload v-model="form.contractFile" :is-show-tip="false" />
					</el-form-item>
					<el-form-item label="合同开始" prop="contractStartTime" class="has_com">
						<el-date-picker
							clearable
							v-model="form.contractStartTime"
							type="datetime"
							@change="selectContractDate"
							default-time="9:00:00"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							placeholder="合同开始">
						</el-date-picker>
					</el-form-item>

					<el-form-item label="合同结束" prop="contractEndTime" class="has_com">
						<el-date-picker
							clearable
							v-model="form.contractEndTime"
							type="datetime"
							@change="selectContractDate"
							default-time="9:00:00"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							placeholder="合同结束">
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="main_cell dis_f_sarwc">
					<el-form-item label="租期" prop="rentDay" class="has_company pos_rel">
						<div class="fwb" style="position: absolute;left: -1rem;color: #F56C6C;">*</div>
						<el-input v-model="form.rentDay" @input="handleRentPrice" :disabled="true" style="color: #000!important;">
							<template slot="append">天</template>
						</el-input>
					</el-form-item>
					<el-form-item label="租金标准" prop="rentStandard" class="has_company">
						<el-input v-model="form.rentStandard" @input="handleRentPrice">
							<template slot="append">￥</template>
						</el-input>
					</el-form-item>
					<el-form-item v-if="this.orderId == '0'" label="网单出租价格" prop="rentPriceOnline" class="has_company">
						<el-input v-model="form.rentPriceOnline" style="width: 200px" @input="handleRentPriceOnline">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
					<el-form-item label="出租价格" prop="rentPrice" class="has_company">
						<el-input v-model="form.rentPrice">
							<template slot="append">￥</template>
						</el-input>
					</el-form-item>
					<!-- <el-form-item label="收租车押金" prop="rentDeposit" class="has_company">
						<el-input v-model="form.rentDeposit">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
					<el-form-item label="收违章押金" prop="breakRuleDeposit" class="has_company">
						<el-input v-model="form.breakRuleDeposit">
							<template slot="append">元</template>
						</el-input>
					</el-form-item> -->
				</div>

				<div class="main_cell dis_f_sarwc">
					<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;"> 验车信息 </div>

					<!-- 新增时 -->
					<div v-for="(item, index) in carComponentList" style="width: 6.8rem;display: flex;margin-bottom: 22px;">
						<span class="loop_span">{{ item.componentName + "：" }}</span>
						<el-select v-model="form.checkItemList[index].componentStatus" allow-create filterable default-first-option style="height: 50px;" v-if="index == 0">
							<el-option
								v-for="dict in dict.type.component_oil"
								:key="dict.value"
								:label="dict.label"
								:value="dict.label">
							</el-option>
						</el-select>
						<el-select v-model="form.checkItemList[index].componentStatus" allow-create filterable default-first-option style="height: 50px;" v-else>
							<el-option
								v-for="dict in dict.type.component_status"
								:key="dict.value" 
								:label="dict.label"
								:value="dict.label">
							</el-option>
						</el-select>
					</div>

					<!-- 修改时 -->
					<div v-for="(item,index) in form.startComponentStatus" style="width: 6.8rem;display: flex;margin-bottom: 22px;">
						<span class="loop_span">{{ item.componentName + "：" }}</span>
						<el-select v-model="form.startComponentStatus[index].componentStatus" v-if="form.startComponentStatus[index].componentDict==0" allow-create filterable default-first-option style="height: 50px">
							<el-option
								v-for="dict in dict.type.component_status"
								:key="dict.value"
								:label="dict.label"
								:value="dict.label"
							></el-option>
						</el-select>
						<el-select v-model="form.startComponentStatus[index].componentStatus" v-if="form.startComponentStatus[index].componentDict==1" allow-create filterable default-first-option style="height: 50px">
							<el-option
								v-for="dict in dict.type.component_oil"
								:key="dict.value"
								:label="dict.label"
								:value="dict.label"
							></el-option>
						</el-select>
					</div>

				</div>
				<div class="main_cell dis_f_sarwc">
					<el-form-item key="dismantle" label="验车完成时间" prop="checkTime" style="position: relative;">

						<el-date-picker
						  clearable
						  style="line-height: 35px;"
						  v-model="form.startDamage.checkTime"
						  type="datetime"
						  default-time="09:00:00"
						  format="yyyy-MM-dd HH:mm"
						  value-format="yyyy-MM-dd HH:mm"
						  placeholder="选择验车完成时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="公里数" prop="kilometers" class="has_company shot_append">
						<el-input v-model="form.startDamage.kilometers">
							<template slot="append">公里</template>
						</el-input>
					</el-form-item>
					<el-form-item label="车损状态" prop="damageStatus">
						<el-radio-group v-model="form.startDamage.damageStatus">
							<el-radio v-for="dict in dict.type.damage_status" :key="dict.value" :label="dict.value">
								{{ dict.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="车损描述" prop="demageDescription" v-if="form.startDamage.damageStatus == '1'">
						<el-input type="textarea" :rows="3" v-model="form.startDamage.demageDescription" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item label="车损照片" prop="demageImg" v-if="form.startDamage.damageStatus == '1'">
						<image-upload v-model="form.startDamage.demageImg" :is-show-tip="false"/>
					</el-form-item>
					<el-form-item label="车损视频" prop="demageVideo" v-if="form.startDamage.damageStatus == '1'">
						<file-upload v-model="form.startDamage.demageVideo" :fileSize="500" :fileType="['mp4','mkv','avi','MOV','rmvb','wmv','hevc','pal','livp','heic','MPEG-4']"  :is-show-tip="false"/>
					</el-form-item>
					<el-form-item label="备注">
						<el-input
							type="textarea"
							:rows="2"
							placeholder="请输入内容"
							v-model="form.remark">
						</el-input>
					</el-form-item>
					<div class="wa cell_label col_1 fwb" style="padding: 0 .4rem;" v-if="orderId == 0"> 财务明细 </div>
					<!-- 添加费用项目 列表 -->
					<div class="dis_f_sarwc" v-if="orderId == 0">
						<div class="wa cost_list" v-for="(item,index) in form.costTableList" v-if="form.costTableList.length !== 0">
							<div class="item dis_f">
								<div class="label">费用类别：</div>
								<div class="text">{{item.costTypeName}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">财务状态：</div>
								<div class="text">{{item.financeStatus | financeStatu}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">收/付款方：</div>
								<div class="text">{{item.payerReceiver}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">应收/付金额：</div>
								<div class="text">{{item.mustAmount}} 元</div>
							</div>
							<div class="item dis_f">
								<div class="label">应收/付时间：</div>
								<div class="text">{{item.mustTime}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">实收/付金额：</div>
								<div class="text">{{item.actualAmount}} 元</div>
							</div>
							<div class="item dis_f">
								<div class="label">实收/付时间：</div>
								<div class="text">{{item.actualTime}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">付款方式：</div>
								<div class="text">{{item.payChannel == 1 ? '现金' : '支付接口'}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">是否已入公账：</div>
								<div class="text">{{item.payIntoAmount == 0 ? '未入' : '已入'}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">入公账时间：</div>
								<div class="text">{{item.payIntoTime}}</div>
							</div>
							<div class="item dis_f">
								<div class="label">备注：</div>
								<div class="text">{{item.remark}}</div>
							</div>
							<div class="cost_list_del">
								<div class="" @click="handleDelete(item.newId)">删除</div>
							</div>
						</div>
						<el-button type="primary" @click="addExpense" style="margin-bottom: 22px"> 添加财务明细 </el-button>
					</div>
				</div>
			</el-form>
		</div>
		<el-dialog title="添加车型" :visible.sync="isAddHandle" width="86%" center >
			<addNewHandle @parHandle="addHandleSuccess"></addNewHandle>
		</el-dialog>
		<el-dialog title="新增费用项目" :visible.sync="isAddExpense" width="86%" center >
			<addExpense @parHandle="addExpenseSuccess"></addExpense>
		</el-dialog>
	</div>
</template>
<script>
import addNewHandle from '@/components/AddNew/addNewHandle';
import addExpense from '@/components/AddNew/addExpense';
import { getCarOrder } from "@/api/carOrder";
import { listShop }from "@/api/shop";
import { listCustomer }from "@/api/customer";
import { listOnlinePlatform }from "@/api/onlinePlatform";
import { listCompanyStaff }from "@/api/user"; // 4
import { getCar, listCar }from "@/api/car"; // s2 5
import { listCarBrandModel }from "@/api/carBrandModel";
// 7
import { listCarComponent }from "@/api/carComponent"; // 8
import { listCarComponentStatus } from "@/api/carComponentStatus"; // 8
import { getCarDamage } from  "@/api/carDamage"; // 9 车损
import { getDays }from "@/utils";
export default {
	components: { addNewHandle, addExpense},
	dicts: ["customer_resource","sys_user_sex","car_type","car_color","component_oil","component_status","pay_type","order_status","rent_type","damage_status","pay_channel","finance_status","pay_into_amount","pay_way"],
	props: ["typeName"],
	data(){
		return {
			isModify: false,
			orderId: Number(this.$route.params.id) || 0,
			carId: Number(this.$route.params.carId) || 0,
			form: {
				customerResourceType: "1",
				rentType: "1",
				payType: "1",
				payChannel: "1",
				instalmentAmount: 1,
				startDamage: {
					damageStatus: "2",
				},
				startComponentStatus: [],
				checkItemList: [],
				costTableList: [],
			},
			agentList: [],	// 发车员
			isAddHandle: false,
			isAddCost:false,
			isAddExpense: false,

			customer: {},	// 车型表格数据
			carBrandModelList: [],	// 线上平台表格数据
			onlinePlatformList: [],	// 客户表格数据
			customerList: [],	// 车辆表格数据
			carList: [],	// 车辆部件表格数据

			// 费用类型表格数据
			carComponentList: [],		// 新增时

			shopList: [],
			rules: {
				shopId: [{required: true,message: "发车门店不能为空",trigger: "blur"}],
				startId: [{required: true,message: "发车员不能为空",trigger: "blur"}],
				startTime: [{required: true,message: "发车时间不能为空",trigger: "blur"}],
				carId: [{required: true, message: "车辆不能为空", trigger: "blur"}],
				contractStartTime: [{required: true,message: "合同开始时间不能为空",trigger: "blur"}],
				contractEndTime: [{required: true,message: "合同结束时间不能为空",trigger: "blur"}],
				rentPrice: [{required: true,message: "出租价格不能为空",trigger: "blur"}],
				// rentDeposit: [{required: true,message: "收租车押金不能为空",trigger: "blur"}],
				// breakRuleDeposit: [{required: true,message: "收违章押金不能为空",trigger: "blur"}],
				customerId: [{required: true,message: "客户不能为空",trigger: "blur"}],
			},
			readynum: 0,
			readys: [],
		}
	},
	created() {
		this.loading = this.$loading({
			lock: true,
			text: "加载中",
			background: "rgba(0, 0, 0, 0.7)",
		});
		window.scrollTo(0,0);
		this.getShopList();
		this.getCustomerList();
		this.getOnlinePlatformList();
		this.getAgentList();
		this.getCarList();
		this.getCarBrandModelList();
		// 修改触发
		if(this.orderId != 0){
			this.readynum = 9;
			this.form.carId = this.carId;
			this.getCarOrder();
			this.getCarInfo();
			this.isModify = true;

			this.getStartComponentStatus();	// 车辆部件（修改时）
		}else{
			this.readynum = 6;

			this.getCarComponentList();	// 车辆部件（新增时）
		}
	},
	methods: {
		// 1 获取订单详情
		async getCarOrder(){
			await getCarOrder(this.orderId).then( res => {
				// console.log("订单信息startId",res)
				if(res.code == 200){
					this.form.carNumber = res.data.carNumber;
					this.form.brand = res.data.brand;
					if(res.data.costTableList == null){ this.form.costTableList = []; };
					if(!res.data.remark){ this.form.remark = '' };
					if(!res.data.isBreak){ this.form.isBreak = "0" };
					if(!res.data.endDamage){
						this.form.endDamage = {
							damageType: "2",
							damageStatus: "2",
							isRepair: '0',
							isInsurance: '0',
							checkTime: '',
						}
					}
					this.form = res.data;
					this.getDamage();	// 查车损
					this.readysEnd();
				}
			})
		},
		/** 1 查询发车门店列表 */
		async getShopList() {
			await listShop().then(response => {
				this.shopList = response.rows;
				this.readysEnd();
			});
		},
		/** 2 查询客户列表 */
		async getCustomerList() {
			await listCustomer().then(response => {
				this.customerList = response.rows;
				this.readysEnd();
			});
		},
		/** 3 查询线上平台列表 */
		async getOnlinePlatformList() {
			await listOnlinePlatform().then(response => {
				this.onlinePlatformList = response.rows;
				this.readysEnd();
			});
		},
		/** 4 查询业务员列表 */
		async getAgentList() {
			await listCompanyStaff().then(response => {
				this.agentList = response.rows;
				this.readysEnd();
			});
		},
		/** 5 查询车辆列表 */
		async getCarList() {
			// const param = { carStatus: 1 }
			await listCar().then((response) => {
				this.carList = response.rows;
				this.readysEnd();
			});
		},
		// 6 查询车型列表
		async getCarBrandModelList() {
			await listCarBrandModel().then(response => {
				this.carBrandModelList = response.rows;
				this.readysEnd();
			});
		},
		// 8 查询车辆部件列表（新增时）
		async getCarComponentList() {
			const param = { componentType: "1" };
			await listCarComponent(param).then(response => {
				this.carComponentList = response.rows;
				let list = [];
				response.rows.forEach((item, index) => {
					list.push({
						"componentId": item.id,
						"componentName": item.componentName,
						"componentStatus": ''
					})
					if (response.rows.length - 1 === index) {
						this.form.checkItemList = list;
					}
				})
				this.readysEnd();
			});
		},
		// 8 查询车辆部件列表（修改时）
		async getStartComponentStatus() {
			await listCarComponentStatus({
				orderId: this.orderId,
				checkType: '1'
			}).then(res => {
				this.form.startComponentStatus = res.rows;
			});
		},

		/** 9 查询查询发车车损详情 */
		getDamage() {
			if(this.form.startDamageId){
				getCarDamage(this.form.startDamageId).then(response => {
					this.form.startDamage = response.data;
				});
			}
			if(this.form.endDamageId){
				getCarDamage(this.form.endDamageId).then(response => {
					this.form.endDamage = response.data;
				});
			}
			this.readysEnd();
		},
		readysEnd(){
			this.readys.push(1);
			// console.log(this.readys)
			if(this.readys.length == this.readynum){
				this.loading.close();
			}
		},

		/** 选择合同日期 */
		selectContractDate() {
			let arr = [];
			if(this.form.contractStartTime && this.form.contractEndTime){
				arr[0] = this.form.contractStartTime;
				arr[1] = this.form.contractEndTime;
				// console.log(arr,getDays(arr))
				this.$set(this.form, 'rentDay', getDays(arr));
				this.handleRentPrice();
			}
		},
		/** s1 选择线上平台 */
		selectPlatform(item) {
			if (this.onlinePlatformList.includes(item)) {
				this.$set(this.form, "onlineResourceName", item.platformName);
				this.$set(this.form, "onlineProportion", item.commisionRate);
			} else {
				this.$set(this.form, "onlineProportion", "");
			}
		},
		/** s2 选择车辆 */
		selectCar(id) {
			this.form.carId = id;
			this.carId = id;
			this.getCarInfo();
		},
		// 获取被选车辆信息
		getCarInfo(){
			getCar(this.carId).then( res => {
				if(res.code === 200){
					this.form.carNumber = res.data.carNumber;
					this.form.carId = res.data.id;
					this.form.brand = res.data.brand;

					this.$set(this.form,"ownerProportion",res.data.ownerCommisionRate);
					this.$set(this.form,"rentStandard", res.data.rentPrice);
					this.$set(this.form.startDamage, 'kilometer', res.data.kilometer);
				}
			})
			this.readysEnd();
		},

		// s3 计算出租价格
		handleRentPrice() {
			if(this.form.customerResourceType == '2') {
				let price = ( Number(this.form.rentStandard) || 1 ) * ( Number(this.form.rentDay) || 1 );
				this.$set(this.form,"rentPrice", price);
			}
			if(this.form.customerResourceType == '1' && this.form.rentStandard!=null && this.form.rentDay ){
				let price = ( Number(this.form.rentStandard) || 1 ) * ( Number(this.form.rentDay) || 1 );
				this.$set(this.form,"rentPriceOnline", price);
				this.handleRentPriceOnline();
			}
		},
		// 计算网单出租价格
		handleRentPriceOnline() {
			if(this.form.customerResourceType == '1') {
				let price = (Number(this.form.rentPriceOnline) || 1) * ( 1 - (Number(this.form.onlineProportion) || 0 ) / 100 );
				this.$set(this.form,"rentPrice", price);
			}
		},
		// +1 新增车型
		addHandle(){
			this.isAddHandle = true;
		},

		// 新增车型成功后
		addHandleSuccess(type){
			this.isAddHandle = false;
			if(type){
				this.getCarBrandModelList();
			}
		},
		/** +2 新增车辆按钮操作 */
		handleAddCar() {
			this.$router.push("../../addCar/0");
		},
		/** +3 新增客户按钮操作 */
		handleAddCustomer() {
			this.$router.push("../../addNewCustomer/0");
		},
		// +4 添加费用项目 弹窗
		addExpense() {
			this.isAddExpense = true;
		},
		// 添加费用项目 成功后
		addExpenseSuccess(data){
			this.isAddExpense = false;
			this.form.costTableList.push(data);
		},
		// 删除费用项目
		handleDelete(newId) {
			this.$confirm('是否确认删除"' + newId + '"的数据项？').then(() => {
				this.form.costTableList.forEach((item, index) => {
					if (item.newId === newId) {
						this.form.costTableList.splice(index, 1);
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.calculation();
					}
				})
			}).catch(() => {});
		},
		// 计算每期付款金额
		calculation() {
			let sum = 0;
			let realPrice = this.form.realRentPrice || 0;
			this.form.instalmentPrice = Number(realPrice) / Number(this.form.instalmentAmount);
		},
		// 父级调用1 检查数据
		submitCheck(){
			// 发车员 startName startId
			this.$refs["form"].validate(valid => {
				if(!this.form.carId){
					this.$message({
						message: '请选择车辆',
						type: 'error'
					});
					window.scrollTo(0, 0);
					return false
				}
				if(!this.form.customerId){
					this.$message({
						message: '请选择客户',
						type: 'error'
					});
					window.scrollTo(0, 0);
					return false
				}
				if (valid) {
					this.$emit("submit");
				}
				this.loading.close();
			})
		},
		// 父级调用2 清空数据
		resetFields(){
			this.form = {
				customerResourceType: "1",
				rentType: "1",
				payType: "1",
				payChannel: "1",
				instalmentAmount: 1,
				costTableList: [],
				startDamage: {
					damageStatus: "2",
				},
				// checkItemList: [],
				startComponentStatus: [],
			}
			window.scrollTo(0, 0);
		},

		cancalReadOnly(onOff) {
			this.$nextTick(() => {
				if (!onOff) {
					const Selects = this.$refs
				　　　　　　// 如果只有1个下拉框，这段就足够了---start
					if (Selects.agentSelect) {
						const input = Selects.agentSelect.$el.querySelector('.el-input__inner');
						// console.log(input)
						input.removeAttribute('readonly')
					}
					if (Selects.agentSelect1) {
						const input = Selects.agentSelect1.$el.querySelector('.el-input__inner');
						// console.log(input)
						input.removeAttribute('readonly')
					}
				}
			})
		}
	},
	watch:{
		form: {
			handler(val,old){
				this.$emit("addStartChange",val);
			},
			deep: true,  // 深度监听
		}
	},
	filters: {
		financeStatu(value){
			let text = '';
			if(value == 1){
				text = "已收";
			}else if(value == 2){
				text = "未收";
			}else if(value == 3){
				text = "已付";
			}else if(value == 4){
				text = "未付";
			}
			return text
		}
	}
}
</script>
<style scoped lang="scss">
	@import '@/assets/css/common.css';
	#addStart{
		/deep/ .el-dialog--center .el-dialog__body{
			padding: 25px 6px;
		}
		.cost_list{
			background: #eee;
			border-radius: .1rem;
			box-sizing: border-box;
			margin: 0 auto .2rem;
			width: 6rem;
			padding: .2rem;
			position: relative;
			.item{
				.label{
					width: 3rem;
					text-align: right;
					margin-right: 0.1rem;
				}
				.text{
					width: 3rem;
				}
			}
			.cost_list_del{
				position: absolute;
				right: .2rem;
				top: .2rem;
				color: red;
			}
		}
	}
</style>
